        /* 
        Document   : Estilo
        Created on : 10-01-2012, 09:16:05 AM
        Author     : luis
        Description:
            Purpose of the stylesheet follows.
        */

        body { font-family: Arial, Helvetica, sans-serif; margin: 4% 3% 3%;
            background: #FFF; background: linear-gradient(top, #000 0%, #FFF 150%);
            background: -moz-linear-gradient(top, #000 0%, #FFF 150%);
            background: -webkit-linear(top, #000 0%, #FFF 150%);
            background: -webkit-linear-gradient(top, #000 0%, #FFF 150%);
            background: -o-linear-gradient(top, #000 0%, #FFF 150%);
            background: -ms-linear-gradient(top, #000 0%, #FFF 150%);
            background-attachment: fixed;
            background-size: 100% 100%; border-radius: 15px; }

        div#logo { color: #FFF; margin: 0 0 -130px; text-align: justify; }
        ::selection { background: #000; color: #FFF; }

        /* Menu */

        div#menu { background: #DDD; height: 9%; border-radius: 15px }
        ul#menu ul {background: #DDD; border-radius: 15px; }

        ul#menu > li { margin: 1% 0 0 1%; float: left; position: relative; bottom: 1px;
            width: auto; list-style: none; font-weight: bold; text-transform: uppercase;
            border-top-left-radius: 15px; border-top-right-radius: 15px; padding: 1% 1% 0 1%;
            border-top: 1px #AAA solid; border-right: 1px #AAA solid; border-left: 1px #AAA solid; }
        ul#menu li { list-style: none; background: #CCC; }
        ul#menu li li { list-style: none; background: #DDD; }
        ul#menu > li { list-style: none; }

        ul#menu ul li { width: 175px; text-align: left; }

        ul#menu li a { text-decoration: none; color: #2B4350; }
        
        ul#menu ul { visibility:hidden; opacity: 0; padding: 5% 10% 5% 2%; position: absolute;
            transition: opacity .4s; -moz-transition: opacity .4s; border-radius: 15px;
            -o-transition: opacity .4s; -webkit-transition: opacity .5s; z-index: 2; }

        ul#menu li:hover ul { visibility:visible; opacity: 1; margin: 0; top: 23px; }

        ul#menu li:hover, ul#menu li li:hover { background: #444;
            list-style-position: inside; list-style-image: url("../in.png")  }
        ul#menu li:hover { list-style-image: none; background: #BBB; }
        ul#menu li li:hover { border-radius: 15px; width: 99%; color: #FFF }
        ul#menu li li:hover a { color: #FFF }

        ul#menu li.otros { position: relative; float: right; top: -8px;
            margin-left: -15px; border: none; background: none; }

        ul#menu li.otros:hover { background: none; z-index: 1; }
        
        img#blanco, img#negro, img#celeste, img#hospital { height: 20px; width: 20px; }
        ul#menu li.otros:hover, ul#menu li.otros li.otros:hover { list-style: none; }
        img#blanco { display: block; background: #FFF; }
        img#negro { display: block; background: #000; }
        img#celeste { display: block; background: lightblue; }
        img#hospital { display: block; background: darkgreen; }

        /* Cuerpo */

        #page { width: 100%; height: 74%; background: rgba(255, 255, 255, .8);
            border-radius: 15px; margin-top: 1%; padding-bottom: 1%; }
        
        div#titulo { font-size: 26px; font-weight: bold; margin: -15px 0; position: relative;
            text-shadow: 1px 1px 1px #000, 1px -1px 1px #000; display: inline-block; top: -15px;
            font-family: Georgia, "Times New Roman", Times, serif; margin-bottom: 1%; color: #FFF; }

        input { padding-left: 2px; }

        form > span, span#error, div#error { font-size: 14px; color: #000; bottom: 10px;
            position: fixed; right: 10px; font-family: segoe; border: 3px black double;
            text-align: left; border-radius: 15px; font-weight: bolder;
            background: rgb(136, 136, 136); background: rgba(136, 136, 136, .6);
            background: -ms-radial-gradient(white, rgba(136, 136, 136, .6));
            background: -moz-radial-gradient(white, rgba(136, 136, 136, .6));
            background: -webkit-radial(white, rgba(136, 136, 136, .6));
            background: -webkit-radial-gradient(white, rgba(136, 136, 136, .6));
            background: -o-radial-gradient(white, rgba(136, 136, 136, .6));
            background: radial-gradient(white, rgba(136, 136, 136, .6)); z-index: 1; }

        #error fieldset { background: url("../warning.png") bottom right no-repeat;
            background-size: 50% 100%; }

        li { margin-left: 3%; }

        form[name="LoginForm"] { font-size: 1.6em; }
        form[name="LoginForm"] input { font-size: 20px; }

        fieldset { width: auto; display: inline; border-radius: 15px; }

        select, option { font-family: Georgia; font-size: 16px; color: #000; background: #f6f6f6; }

        div#derecha, div#izquierda{ width: 45%; }

        /* Popup */

        a { position: relative; z-index: 0; color: #5D9800; }
        a:hover { z-index: 1; text-decoration: underline; }
        a span { position: absolute; background: #444; text-decoration: none;
            visibility: hidden; width: 6em; text-align: center; font-size: 0.7em;
            color: #EEE; line-height: 10px; font-weight: bold;
            border-radius: 15px; border: 1px #FFF solid; text-transform: uppercase; }
        a:hover span { visibility: visible; top: -24px; left: 14px; }
        #menu a:hover span { left: -24px; }
        #menu a:hover img#blanco + span, #menu a:hover img#negro + span,
        #menu a:hover img#celeste + span, #menu a:hover img#hospital + span { top: -38px; }
        #footer a:hover span { top: -24px; }
        #footer a span { width: 20em; font-size: 0.9em; }

        /* Tablas */

        table table { width: 100%; }
        table table, table + table { margin-top: 15px; border-collapse: collapse; }
        table table input { width: 80%; }

        #tablas { overflow-x: auto; }
        #tablas table, #tablas table th, #tablas table td,
        div#derecha > table, div#derecha > table th, div#derecha > table td {
            border: 1px #000 solid; border-collapse: collapse;
            text-align: center; padding: 1px 0; font-size: 14px; }

        form th { text-align: left; } th[colspan="2"] { text-align: center; }

        .overflow { overflow: auto; height: 50px; width: 150px; float: left; }

        form[name="PerfilForm"] > table, form[name="PerfilForm"] > table th,
        form[name="PerfilForm"] > table td { border: 1px #ADDFFF solid;
            border-collapse: collapse; text-align: center; padding: 1px 10px; }
        
        #tablas table tbody tr, div#derecha > table tbody tr {
            transition: background 1s; -moz-transition: background 1s;
            -o-transition: background 1s; -webkit-transition: background 1s; }
        #tablas table tbody tr:hover, div#derecha > table tbody tr:hover {
            background: #FFF; }

        td a img { height: 35px; }

        td[style="background-color: #006699; "] { background: #000 !important; }
        div#Reporte p { margin: 0; }
        .rotar, td[colspan="6"] span { display: block; height: 100px; top: 30px; position: relative;
            -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
            -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); left: 20px; }
        td[style="text-align: center;"] span { display: block; margin-top: 30px; }

        /* Botones */

        input { border-radius: 3px; border: 1px #000 solid; }

        input[type="button"], input[type="button"]:visited,
        input[type="submit"], input[type="submit"]:visited,
        input[name="limpiar"], input[name="limpiar"]:visited {
            display: inline-block; position: relative; cursor:pointer; color: #FFF;
            box-shadow: 0 1px 3px rgba(0,0,0,0.6); padding: 5px 10px 6px;
            text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border: 0; margin: 1% 1% 4% }

        input[type="button"], input[type="button"]:visited,
        input[type="submit"], input[type="submit"]:visited { background-color: #FF5C00; }
        input[type="button"]:hover, input[type="submit"]:hover { background-color: #D45500; }

        input[name="limpiar"], input[name="limpiar"]:visited { background-color: #E62727; }
        input[name="limpiar"]:hover{ background-color: #CF2525; }

        input[type="button"]:active, input[name="limpiar"]:active,
        input[type="submit"]:active { top: 1px; }

        /* Footer */

        #footer { padding: 3px; margin-top: 1%; }
        #footer, #footer > a { width: 100%; height: 14%; background: #2B4350;
            border-radius: 15px; font-size: 10px; color: #DEE; text-decoration: none; }

        span.requeridos { color: red; font-family: fantasy; font-size: 14px; margin: 0; padding: 0; }